<template>
    <div>
        <van-nav-bar title="个人资料" left-text="返回" left-arrow @click-left="back" />
    </div>

    <div>
        <!-- 背景 -->
        <div class="bg">

        </div>
        <div class="list"  >
            <div class="list-item1">
                <div class="tx" >头像</div>
                <div >
                    <img :src="addlist.userImg " alt="" style="width: 50px;height: 50px;">
                </div>
            </div>
            <div class="list-item1">
                <div>用户id</div>
                <div>{{addlist.userId}}</div>
            </div>
            <div class="list-item1">
                <div >昵称</div>
                <div >{{ addlist.nickName }}</div>
            </div>
            <div class="list-item1">
                <div>简介</div>
                <div>{{ addlist.desc }}

                </div>
            </div>
        </div>

        <!-- 找回密码 -->
        <div>
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="username" name="用户名" label="用户名" placeholder="请输入用户名"
                        :rules="[{ required: true, message: '请输入用户名' }]" />
                    <!-- 短信验证 -->
                    <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
                        <template #button>
                            <van-button size="small" type="primary">发送验证码</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>
        </div>

    </div>
</template>
<script>
import { showConfirmDialog } from 'vant';
import { useRouter } from 'vue-router'
import { get, post } from '../request'
import { ref } from "vue";
export default {
    setup() {

        //修改名称
    const changeNum = async () => {
      const res = await post('/updateNickName', {
        tokenString: JSON.parse(localStorage.getItem('tokens')),
        nickName,
       
      })
      console.log("改名称", res);
    }

        const addlist = ref([])
        const findAccountInfo = async () => {
            const res = await get("/findAccountInfo", {
                params: {
                    tokenString: JSON.parse(localStorage.getItem('tokens'))
                }
            })
            addlist.value = res.data.result[0]
            console.log("个人资料信息", res);
        }
        findAccountInfo()

        const router = useRouter();
        const back = () => {
            router.go(-1);
        }

        //获取个人信息

        //输入框失去焦点触发（修改了内容，再发起请求）
        const aaa = () => {
            console.log(123);
        }

        const demo = () => {
            showConfirmDialog({
                title: '标题',
                message: '解决方法',
            })
                .then(() => {
                    console.log(456);
                });
        }
        // demo()
        return {
            aaa,
            back,
            findAccountInfo,
            addlist,
            changeNum
            
        }
    }
}
</script>
<style lang="less" scoped>

textarea {
    border: none;
}

// .van-field__control{}
.list-item1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
    font-size: 15px;
    margin-left: 10px;
}

.bg {
    height: 200px;
    background-color: #ff8c8c;
}

.list {
    position: relative;
    top: -20px;
    left: 0;
    width: 95%;
    margin: 0 auto;
    background-color: #fff;
    height: 200px;
    border-radius: 5px;
    .tx{
   
    font-size: 15px;
    margin-top: 5px;
}
}
</style>